<html>
	<head>

		<script type="text/javascript">

		function writeResult(text)
		{
				var output = document.getElementById('output');
				var p = document.createElement("p");
				var nodeText = document.createTextNode(text);
				p.appendChild(nodeText);
				output.appendChild(p);
		}

		function generateList(people,template)
		{
			var ul = document.createElement("ul");
			for(var i = 0;i< people.length;i++)
			{
				var li = document.createElement("li");
				var text = template.split(" ");
				var newElement;	
				var j = 0;			
				for(var property in people[i])
				{
					var name = property;
					var tagElemets = text[j].split('-');
					var tagname = String(tagElemets[0].replace(/(<|>)/g,""));
					newElement = document.createElement(tagname);
					var exp = "{"+name+"}";							
					var textNode = document.createTextNode(tagElemets[1].replace(exp,people[i][property])+" ");
					newElement.appendChild(textNode);
					li.appendChild(newElement);
					ul.appendChild(li);
					j += 1;
				}
				j = 0;
			}
			return ul;
			
		}

		function onLoad()
		{
			var people = [{name: "Peter", age: 14},{name: "Gosho", age: 15}];
			var temp = document.getElementById("list-item");
			var template = temp.innerHTML;
			var peopleList = generateList(people,template);
  			 temp.innerHTML = "";
  			 temp.appendChild(peopleList);
		}
		</script>
		<title></title>
	</head>
	<body onload="onLoad()">
		<pre>
			&lt;div data-type=&quot;template&quot; id=&quot;list-item&quot;&gt;
 		&lt;strong&gt;-{name}-&lt;/strong&gt; &lt;span&gt;-{age}-&lt;/span&gt;&lt;div&gt;
 		***
 		var people = [{name: "Peter", age: 14},{name: "Gosho", age: 15}];
			var temp = document.getElementById("list-item");
			var template = temp.innerHTML;
			var peopleList = generateList(people,template);
  			 temp.innerHTML = "";
  			 temp.appendChild(peopleList);
		</pre>
		<div data-type="template" id="list-item"><strong>-{name}-</strong> <span>-{age}-</span></div>		
	</body>
</html>